{% extends "admin42/platformmgr/base.html" %}
{% load admin_utils %}
{% block main_content %}
<div id="platform-operator-list" class="p20">
    <bk-table :data="data" class="mt20">
        <bk-table-column label="集群名称" prop="cluster_name" align="center"></bk-table-column>
        <bk-table-column label="集群 ID" min-width="100" align="center">
            <template slot-scope="props">
                <span v-if="props.row.cluster_id">$[ props.row.cluster_id ]</span>
                <span v-else>--</span>
            </template>
        </bk-table-column>
        <bk-table-column label="命名空间" width="80" align="center">
            <template slot-scope="props">
                <bk-tag v-if="props.row.namespace" theme="success"> ✔ </bk-tag>
                <bk-tag v-else> ✘ </bk-tag>
            </template>
        </bk-table-column>
        <bk-table-column label="Controller" align="center">
            <template slot-scope="props">
                <span v-if="!props.row.namespace || !props.row.controller.replicas">
                    --
                </span>
                <bk-tag v-else-if="props.row.controller.readyReplicas === props.row.controller.replicas" theme="success">
                    ✔ $[ props.row.controller.readyReplicas ] / $[ props.row.controller.replicas ]
                </bk-tag>
                <bk-tag v-else-if="props.row.controller.readyReplicas !== 0" theme="warning">
                    ❗$[ props.row.controller.readyReplicas ] / $[ props.row.controller.replicas ]
                </bk-tag>
                <bk-tag v-else theme="danger">
                    ✘ $[ props.row.controller.readyReplicas ] / $[ props.row.controller.replicas ]
                </bk-tag>
            </template>
        </bk-table-column>
        <bk-table-column label="CRD" min-width="260" align="center">
            <template slot-scope="props">
                <div v-for="(exists, crdKind, idx) in props.row.crds" style="display: inline">
                    <bk-tag v-if="exists" theme="success">✔ $[ crdKind ]</bk-tag>
                    <bk-tag v-else theme="danger">✘ $[ crdKind ]</bk-tag>
                </div>
            </template>
        </bk-table-column>
        <bk-table-column label="BkApp ( ready / total )" align="center">
            <template slot-scope="props">
                <span
                    v-if="props.row.crds && props.row.crds.BkApp && props.row.BkApp"
                >$[ props.row.BkApp.ready_cnt ] / $[ props.row.BkApp.total_cnt ]</span>
                <span v-else>--</span>
                <span
                    v-if="props.row.BkApp && props.row.BkApp.not_ready_bkapps && props.row.BkApp.not_ready_bkapps.length"
                    v-bk-tooltips="genTooltipsConfig(props.row)" class="ml5"
                >🔍</span>
            </template>
        </bk-table-column>
        <bk-table-column label="DomainGroupMapping" align="center">
            <template slot-scope="props">
                <span v-if="props.row.crds && props.row.crds.DomainGroupMapping">
                    $[ props.row.DomainGroupMapping.total_cnt ]</span>
                <span v-else>--</span>
            </template>
        </bk-table-column>
    </bk-table>
</div>

{% endblock %}


{% block main_script %}
<script>
    const URLRouter = {
        listClusters: decodeURI("{% url 'wl_api.clusters' %}"),
        getOperatorInfo: decodeURI("{% url 'wl_api.cluster.operator_info' '${cluster_name}' %}"),
    }

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            el: "#platform-operator-list",
            delimiters: ['$[', ']'],
            mixins: [SubmitMixin],
            data: function() {
                return {
                    data: [],
                }
            },
            mounted: function () {
                this.list()
            },
            methods: {
                list: async function () {
                    const el = this.$bkLoading({title: '加载中'})
                    try {
                        // 先获取集群信息占位
                        let clusters = await this.$http.get(URLRouter.listClusters)
                        for (let i = 0; i < clusters.length; i++) {
                            this.data.push({
                                cluster_name: clusters[i].name,
                                cluster_id: clusters[i].annotations.bcs_cluster_id
                            })
                        }
                    } finally {
                        el.hide = true
                    }
                    // 再逐个更新集群的 Operator 信息
                    for (let i = 0; i < this.data.length; i ++) {
                        let url = URLRouter.getOperatorInfo.replace("${cluster_name}", this.data[i].cluster_name)
                        await this.$http.get(url).then(ret => {
                            this.$set(this.data, i, {...this.data[i], ...ret})
                        })
                    }
                },
                genTooltipsConfig: function (row) {
                    return {
                        content: 'Not Ready:<br>' + row.BkApp.not_ready_bkapps.join('<br>'),
                        disabled: !(row.BkApp.not_ready_bkapps && row.BkApp.not_ready_bkapps.length),
                        allowHTML: true
                    }
                }
            },
        })
    })
</script>

{% endblock %}
